<template>
	<view class="content">
		<view class="top-title" :style="{ height: statusBarHeight + titleBarHeight + 'px' }">
			<!-- <view class="text-title"><image src="../../static/hdclogo.png"></image></view> -->
			<view class="loaction" @click="openGps" :style="[loactionStyle]">
				<image src="../../static/img/dingwei.png" style="width: 32rpx;height: 32rpx;" mode=""></image>
				<!-- <u-icon name="map" color="#3C3C3C" size="32"></u-icon> -->
				<view class="text">{{ address }}</view>
				<view class="title-right"><u-icon name="arrow-right" color="#3C3C3C" size="28"></u-icon></view>
			</view>
		</view>
		<view class="swiper">
			<view class="swiper-item" @click="swiperIndex = 0">
				<image src="../../static/img/lingyang2.png" mode="" v-if="swiperIndex == 0"></image>
				<image src="../../static/img/lingyang.png" mode="" v-else></image>
				<span :class="swiperIndex == 0 ? 'active' : 'active2'">领养</span>
				<image v-if="swiperIndex == 0" style="display: block;width: 48rpx; height: 18rpx;position: absolute;bottom: 0rpx;" src="@/static/img/san.png"></image>
			</view>
			<view class="swiper-item" @click="getExpect()">
				<image src="../../static/img/qiuou2.png" mode="" v-if="swiperIndex == 1"></image>
				<image src="../../static/img/qiuou.png" mode="" v-else></image>
				<span :class="swiperIndex == 1 ? 'active' : 'active2'">配对求偶</span>
				<image v-if="swiperIndex == 1" style="display: block;width: 48rpx; height: 18rpx;position: absolute;bottom: 0rpx;" src="@/static/img/san.png"></image>
			</view>
			<view class="swiper-item" @click="getExpect()"> 
				<image src="../../static/img/jiyang2.png" mode="" v-if="swiperIndex == 1"></image>
				<image src="../../static/img/jiyang.png" mode="" v-else></image>
				<span :class="swiperIndex == 2 ? 'active' : 'active2'">寄养</span>
				<image v-if="swiperIndex == 2" style="display: block;width: 48rpx; height: 18rpx;position: absolute;bottom: 0rpx;" src="@/static/img/san.png"></image>
			</view>
			<view class="swiper-item" @click="getExpect()">
				<image src="../../static/img/shangmen2.png" mode="" v-if="swiperIndex == 1"></image>
				<image src="../../static/img/shangmen.png" mode="" v-else></image>
				<span :class="swiperIndex == 3 ? 'active' : 'active2'">上门喂养</span>
				<image v-if="swiperIndex == 3" style="display: block;width: 48rpx; height: 18rpx;position: absolute;bottom: 0rpx;" src="@/static/img/san.png"></image>
			</view>
		</view>
		<view class="dataList" :style="{ height: windowHeight + 'px' }">
			<adopt v-if="swiperIndex == 0" style="background: #f2f2f2;" :height="windowHeight" :longitude="longitude" :latitude="latitude"></adopt>
			<!-- <pair v-if="swiperIndex == 1" style="background: white;"></pair> -->
			<u-toast ref="uToast" />
		</view>
		<view class="suspend" v-if="swiperIndex == 0" @click="goRelease"><image src="../../static/img/fabuly.png" mode=""></image></view>
	</view>
</template>

<script>
import adopt from './component/adopt.vue';
import pair from './component/pair.vue';
let systemInfo = uni.getSystemInfoSync();
let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
export default {
	components: {
		adopt,
		pair
	},
	data() {
		return {
			onShow: false,
			title: 'Hello',
			address: '赣州市',
			swiperIndex: 0,
			statusBarHeight: 0,
			titleBarHeight: 0,
			windowHeight: 0,
			longitude: 0.0,
			latitude: 0.0,
			RefreshNum: 8
		};
	},
	onPullDownRefresh() {
		if(this.RefreshNum == 8){
			let a = setInterval(()=>{
				this.RefreshNum--
				if(this.RefreshNum == 0){
					clearInterval(a)
					this.RefreshNum = 8
					this.getLocation();
					return false
				}
				console.log(this.RefreshNum)
			},1000)
		}
		
		// this.address = this.$store.getters.getAddress;
		// this.longitude = this.$store.getters.getLongitude;
		// this.latitude = this.$store.getters.getLatitude;
		// let login = uni.getStorageSync('login');
		// if (login) {
		// 	this.getAuthorizeInfo();
		// 	// this.getLocation()
		// } else {
		// 	if (!this.address && !this.longitude && !this.latitude) {
		// 		this.getAuthorizeInfo();
		// 	}
		// }
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onShow() {
		// if (this.Refresh !== 1) {
		// this.Refresh += 1
		// }
		// 因领养模块是个组件，所以与vue标准组件的生命周期相同，用户更改位置后要重新请求接口，所以就按照父组件给子组件传值的方式传过去
		// 判断从缓存中获取经纬度是否有值，无值时就变成0.0
		
	},
	watch: {
		longitude() {
			console.log('经纬度变了');
		}
	},
	methods: {
		goRelease() {
			uni.navigateTo({
				url: '../../myPackageA/index/ReleaseAdopt/ReleaseAdopt'
			});
		},
		PullUpLoading() {},
		// 手动定位
		openGps() {
			uni.navigateTo({
				url: '../../myPackageA/index/orientation/orientation?address=' + this.address
			});
		},
		// 获取定位
		getLocation() {
			uni.getLocation({
				type: 'wgs84',
				success: res => {
					console.log(res)
					// 经度
					this.$store.commit('setLongitude', res.longitude);
					// 纬度
					this.$store.commit('setLatitude', res.latitude);
					uni.request({
						url: 'https://restapi.amap.com/v3/geocode/regeo?key=f797b843ae3f8b8d65b9ea2b393d0f0d&location=' + res.longitude + ',' + res.latitude,
						method: 'GET',
						success: ret => {
							this.$store.commit('setAddress', ret.data.regeocode.addressComponent.city);
							this.address = this.$store.getters.getAddress;
							this.longitude = this.$store.getters.getLongitude;
							this.latitude = this.$store.getters.getLatitude;
							// uni.setStorageSync('login', false)
						}
					});
				},
				fail: err => {
					if(err.errMsg == 'getLocation:fail:ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF'){
						uni.showToast({
							title: '请打开定位服务',
							icon: 'none',
							duration: 1500
						});
					}else{
						uni.showToast({
							title: '请勿频繁刷新',
							icon: 'none',
							duration: 1000
						});
					}
				}
			});
		},
		// 获取授权
		getAuthorizeInfo() {
			let that = this;
			uni.authorize({
				scope: 'scope.userLocation',
				success: () => {
					// 允许授权
					if(!uni.getStorageSync('address')){
						// let a = clearInterval(()=>{
						// 	that.RefreshNum--
						// 	if(that.RefreshNum == 1){
						// 		clearTimeout(a)
								this.getLocation();
						// 		return
						// 	}
						// 	console.log(that.RefreshNum)
						// },1000)
					}
				},
				fail: () => {
					// 拒绝授权
					uni.showModal({
						title: '请求授权当前位置',
						content: '需要获取您的地理位置，请确认授权',
						success: res => {
							if (res.confirm) {
								uni.openSetting({
									success: res => {
										this.getLocation();
									}
								}); // 打开地图权限设置
							} else if (res.cancel) {
								uni.showToast({
									title: '你拒绝了授权，无法获得周边信息',
									icon: 'none',
									duration: 1000
								});
							}
						}
					});
				}
			});
		},
		getExpect() {
			this.$refs.uToast.show({
				title: '敬请期待！',
				type: 'warning'
			});
		}
	},
	mounted() {
		// if(this.RefreshNums){
			this.getLocation();
		// }
		// if(this.RefreshNum == 10){
		// 	this.RefreshNums = false
		// 	let a = setInterval(()=>{
		// 		this.RefreshNum--
		// 		if(this.RefreshNum == 0){
		// 			clearInterval(a)
		// 			this.RefreshNum = 10
		// 			this.getLocation();
		// 			return false
		// 		}
		// 		console.log(this.RefreshNum)
		// 	},1000)
		// }
		// this.address = this.$store.getters.getAddress;
		// this.longitude = this.$store.getters.getLongitude;
		// this.latitude = this.$store.getters.getLatitude;
		// let login = uni.getStorageSync('login');
		// if (login) {
		// 	this.getAuthorizeInfo();
		// 	// this.getLocation()
		// } else {
		// 	if (!this.address && !this.longitude && !this.latitude) {
		// 		this.getAuthorizeInfo();
		// 	}
		// }
	},
	onLoad() {
		if (systemInfo.model.indexOf('iPhone') !== -1) {
			this.titleBarHeight = 44;
		} else {
			this.titleBarHeight = 48;
		}
		this.statusBarHeight = systemInfo.statusBarHeight;
		this.windowHeight = systemInfo.windowHeight - systemInfo.statusBarHeight - this.titleBarHeight - 108;
	},
	computed: {
		// 顶部定位样式
		loactionStyle() {
			let style = {};
			style.position = 'absolute';
			style.top = menuButtonInfo.top + menuButtonInfo.height / 2 - 10 + 'px';
			style.paddingLeft = 30 + 'rpx';
			return style;
		}
	}
};
</script>

<style lang="scss" scoped>
.suspend {
	width: 100rpx;
	height: 70rpx;
	border-radius: 50rpx 0 0 50rpx;
	background: #ffcc00;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	bottom: 60rpx;
	right: 0rpx;
	image {
		width: 40rpx;
		height: 40rpx;
	}
}
.money-left {
	.money-left-money {
		color: #ed5d4d;
		font-weight: bold;
	}
	.money-left-money2 {
		width: 100%;
		display: flex;
		flex-direction: row;
		color: #ed5d4d;
		font-weight: bold;
		span:nth-of-type(2) {
			color: #333333;
			font-weight: normal;
			margin-left: 10rpx;
		}
	}
}
.money {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	font-size: 28rpx;
	position: absolute;
	bottom: 0;
	view {
		width: 50%;
	}
	.money-right {
		display: flex;
		flex-direction: row-reverse;
		color: #959595;
	}
}
.template-center {
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: row;
	font-size: 28rpx;
	span {
		border-radius: 10rpx;
	}
	span:not(:first-child) {
		margin-left: 20rpx;
	}
	span:nth-of-type(1) {
		width: 50rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 149, 255, 0.08);
		border-radius: 10rpx;
	}
	span:nth-of-type(2) {
		padding: 0 15rpx;
		height: 50rpx;
		display: flex;
		color: #ff9a00;
		align-items: center;
		justify-content: center;
		background: rgba(255, 154, 0, 0.08);
		border-radius: 10rpx;
	}
	span:nth-of-type(3) {
		padding: 0 15rpx;
		height: 50rpx;
		display: flex;
		color: #8356f3;
		align-items: center;
		justify-content: center;
		background: rgba(131, 86, 243, 0.08);
		border-radius: 10rpx;
	}
}
.template-title {
	width: 100%;
	font-size: 30rpx;
	color: #333333;
	font-weight: bold;
	padding: 10rpx 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.itemList-template {
	width: 65%;
	height: 180rpx;
	display: flex;
	// align-items: center;
	flex-direction: column;
	position: relative;
}
.itemList-img {
	width: 35%;
	height: 180rpx;
	display: flex;
	align-items: center;
	image {
		width: 220rpx;
		height: 170rpx;
		border-radius: 15rpx;
	}
}
.itemList-item-top {
	width: 700rpx;
	height: 80%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
}
.itemList-item-bottom {
	width: 700rpx;
	height: 20%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	font-size: 28rpx;
	color: #959595;
	padding: 20rpx 0;
}
.itemList-item {
	width: 100%;
	min-height: 266rpx;
	border-bottom: 2px solid #f6f6f6;
	display: flex;
	align-items: center;
	// justify-content: center;
	flex-direction: column;
	padding-top: 20rpx;
}
.itemList {
	width: 100%;
	height: calc(100vh - 500rpx);
	// background: pink;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.titles-right {
	width: 60%;
	height: 100%;
	display: flex;
	align-items: center;
	flex-direction: row-reverse;
	font-weight: bold;
	font-size: 28rpx;
	color: #454549;
	image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 20rpx;
	}
}
.titles-left {
	width: 40%;
	height: 100%;
}
.dataList-title {
	width: 100%;
	// height: 120rpx;
	// background: red;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	padding: 20rpx 10rpx;
}
.dataList {
	width: 100%;
	border-radius: 24rpx 24rpx 0 0;
	background-color: #f2f2f2;
}
.active {
	color: #454549;
	font-family: PingFang SC;
	font-weight: bold;
}
.active2 {
	color: #454549;
	font-family: PingFang SC;
	font-weight: bold;
}
.swiper-item {
	width: 23%;
	height: 200rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: relative;
	padding-bottom: 50rpx;
	image {
		display: block;
		width: 120rpx;
		height: 120rpx;
	}
}
.swiper {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-direction: row;
	margin-top: 16rpx;
}
.title-right {
	margin: 0 5rpx;
	font-size: 24rpx;
	color: white;
}
.title-leftback {
	position: absolute;
	border-radius: 50rpx;
	left: 20rpx;
	text-align: center;
	background: white;
	opacity: 0.4;
	width: 175rpx;
	height: 50rpx;
}
.text {
	margin: 0 10rpx;
	font-size: 28rpx;
	font-weight: 400;
	color: #3c3c3c;
	line-height: 40rpx;
}
.loaction {
	height: 40rpx;
	display: flex;
	align-items: center;
	flex-direction: row;
	z-index: 10;
}
.top-title {
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: row;
	position: sticky;
	top: 0;
	z-index: 9;
	background-color: #ffcc00;
}
.content {
	width: 100%;
	background: #ffcc00;
	// height: calc(100vh - 1px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	// border-bottom: 1px solid #F2f2f2;
}
</style>
